<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <comment-list :list="list"></comment-list>
        <comment-new @sendtofather="accept"></comment-new>
    </div>

    <!-- 评论模块 -->
    <template id="list">
        <div>
            <comment-item v-for="(item,index) in list" :key="index" :item="item"></comment-item>
        </div>
    </template>

    <!-- 每一条评论小模块 -->
    <template id="item">
        <div>
            <img src="logo192.png" alt="" width="50" height="50">
            <h3>{{item.author}}</h3>
            <p>{{item.info}}</p>
        </div>
    </template>

    <!-- 添加新评论模块 -->
    <template id="new">
        <div>
            <input type="text" v-model="author">
            <textarea cols="20" rows="5" v-model="info"></textarea>
            <button @click="send">点击发表评论</button>
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var commentItem = {
            template: '#item',
            props: ['item']
        }
        var commentList = {
            template: '#list',
            props: ['list'],
            components: {
                'comment-item': commentItem
            }
        }
        var commentNew = {
            template: '#new',
            data() {
                return {
                    author: '',
                    info: ''
                }
            },
            methods: {
                send() {
                    var obj = {
                        author: this.author,
                        info: this.info
                    }
                    this.$emit('sendtofather', obj);
                    this.author = this.info = ''
                }
            },
        }

        var vm =new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        author: 'kelly',
                        info: '月以来，受降雨和洪峰影响，江西省九江市江洲镇水'
                    },
                    {
                        author: 'lemo',
                        info: '位持续超过警戒水位2米以上，近4万名群众'
                    },
                    {
                        author: 'lumi',
                        info: '生命和财产安全受到威胁'
                    }
                ],
                hello: '我是根组件的数据'
            },
            methods: {
                accept(data) {
                    this.list.unshift(data)
                }
            },
            components: {
                'comment-list': commentList,
                'comment-new': commentNew
            }
        })
    </script>
</body>
</html>